<template>
  <div class="editPanelContainer">
    <div class="header-container" v-if="route.fullPath.includes('/editor')">
      <el-text v-if="serialNum">当前题号：{{ serialNum }}</el-text>
      <el-text v-else>备注说明</el-text>
      <el-button link type="primary" @click="emits('finishEdit')">完成编辑</el-button>
    </div>
    <div v-for="(item, key) in com.status" :key="item.id" class="mb-20">
      <component v-if="item.isShow" :is="item.editCom" :config-key="key" v-bind="item" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import type { Status } from '@/types';
const emits = defineEmits(['finishEdit']);
const route = useRoute();
defineProps<{ com: Status; serialNum?: number }>();
</script>

<style scoped lang="scss">
.editPanelContainer {
  padding: 15px 20px;
}
.header-container {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--el-menu-border-color);
  padding-bottom: 5px;
  margin-bottom: 10px;
}
</style>
